<template>
	<view>
		<view style="height:30upx;" class="bg-gray"></view>
		<view class="cu-bar bg-white solid-bottom" style="padding:0 30upx 0 0"
			v-for="item in list" :key="item" @tap="selectPayType(item)">
			<view>
				<image class="cu-avatar bg-white" :src="'https://statics.xmcsrv.net/weixin/cloud/payType/'+item+'.svg'" style="margin-right:10upx"></image>
				<text v-if="item===1">{{$t('JLink.payType.alipay')}}</text><!-- 支付宝支付 -->
				<text v-else-if="item===2">{{$t('JLink.payType.weChat')}}</text><!-- 微信支付 -->
				<text v-else-if="item===3">{{$t('JLink.payType.paypal')}}</text><!-- Paypal -->
				<text v-else-if="item===5">{{$t('JLink.payType.system')}}</text><!-- 系统支付 -->
				<text v-else-if="item===7">{{$t('JLink.payType.packageCard')}}</text><!-- 套餐卡支付 -->
				<text v-else-if="item===9">{{$t('JLink.payType.creditcard')}}</text><!-- 信用卡支付 -->
				<text v-else-if="item===10">Pix{{$t('JLink.publicText.pay')}}</text>
				<text v-else-if="item===11">Apple pay</text>
			</view>
			<view>
				<text :class="type===item ? 'cuIcon-roundcheckfill text-red' : 'cuIcon-round text-grey'"
				class="lg " style="font-size:38upx"></text>
			</view>
		</view>
		<view style="height:200upx" class="bg-white"></view>
	</view>
</template>

<script>
export default {
  props:{
    list:{
      type:Array,
      default:()=>{
        return []
      }
    },
    payTypeValue:{
      type:[Number,String],
      default:1
    }
  },
	data() {
	    return {
        type:null
		}
	},
  watch:{
    payTypeValue(val){
      this.type = newVal;
    }
  },
	methods: {
    selectPayType (type){
      this.type = type;
      this.$emit('selectPayType',type)
    }
}
}
</script>

<style lang="less" scoped>
	@import '@/common/style/main.css';
</style>
